﻿@model IEnumerable<SICAR.Models.Orden>

@{
	ViewBag.Title = "Seguimiento";
	Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var marcas = [
	@foreach (var orden in Model) {
		@Html.Raw("[")
		foreach (var ubicacion in orden.lubicacion)
		{
			@Html.Raw("{ 'title': '" + orden.numero + "-" + ubicacion.idubicacion + "', 'lat': '" + ubicacion.latitud + "', 'lng': '" + ubicacion.longitud + "','description': '" +
			"Dirección: " + ubicacion.direccion + "<br/>Ubicación: " + ubicacion.latitud + " lat, " + ubicacion.longitud + " lon<br/>Hora: " + ubicacion.hora + "<br/>Orden: " + orden.numero + "<br/>Transportista: " + orden.transportista.nombre + "' " + "},");
		}
		@Html.Raw("], ")
	}
];
window.onload = function () {
	var mapOptions = {
		center: new google.maps.LatLng(marcas[0][0].lat, marcas[0][0].lng),
		zoom: 10,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
	var infoWindow = new google.maps.InfoWindow();
	var lalo = new Array();
	var latlngbounds = new google.maps.LatLngBounds();
	for (j = 0; j < marcas.length; j++) {
		var lat_lng = new Array();
		var markers = marcas[j];
		for (i = 0; i < markers.length; i++) {
			var data = markers[i]
			var myLatlng = new google.maps.LatLng(data.lat, data.lng);
			lat_lng.push(myLatlng);
			var marker = new google.maps.Marker({
				position: myLatlng,
				map: map,
				title: data.title
			});
			latlngbounds.extend(marker.position);
			(function (marker, data) {
				google.maps.event.addListener(marker, "click", function (e) {
					infoWindow.setContent(data.description);
					infoWindow.open(map, marker);
				});
			})(marker, data);
		}
		lalo[j] = lat_lng;
	}
	map.setCenter(latlngbounds.getCenter());
	map.fitBounds(latlngbounds);
	
	for (j = 0; j < lalo.length; j++) {
		var path = new google.maps.MVCArray();
		var lat_lng = lalo[j];
		var service = new google.maps.DirectionsService();
		var poly = new google.maps.Polyline({ map: map, strokeColor: '#' + Math.floor(Math.random() * 16777215).toString(16) });
		for (var i = 0; i < lat_lng.length; i++) {
			if ((i) < lat_lng.length) {
				var src = lat_lng[i];
				var des = lat_lng[i + 1];
				path.push(src);
				poly.setPath(path);
				/*
				service.route({
					origin: src,
					destination: des,
					travelMode: google.maps.DirectionsTravelMode.DRIVING
				}, function (result, status) {
					if (status == google.maps.DirectionsStatus.OK) {
						for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
							path.push(result.routes[0].overview_path[i]);
						}
					}
				});
				*/
			}
		}
	}
}
</script>

<h2>Seguimiento</h2>

<div>
	@Html.ActionLink("Volver", "Index")
</div><br/>

<div id="dvMap" style="width: 800px; height: 600px"></div>
